<template>
    <f7-page class="register-success" no-navbar no-toolbar>
        <div class="main">
            <div class="content">
                <f7-icon fa="check-circle"></f7-icon>
                <p class="info">恭喜你注册成功！！！</p>
                <f7-button href="/">去看看新闻</f7-button>
            </div>
        </div>
    </f7-page>
</template>

<style lang="scss">
.register-success {

    .main {
        position: relative;
        padding: 0 15px;
        height: 100%;
        text-align: center;
    }

    .content {
        position: absolute;
        top: 30%;
        left: 15px;
        right: 15px;

    }

    .info {
        font-size: 18px;
    }

    .icon {
        font-size: 100px;
        color:#1aa932;
    }
}
</style>

<script>
export default {
    data() {
        return {
            locationPicker: null,
            birthdayPicker: null
        }
    },
    mounted() {
        this.initLocationPicker()
        this.initBirthdayPicker()
    },
    methods: {
        // 所在地选择器初始化
        initLocationPicker() {
            this.locationPicker = this.$f7.picker({
                input: '#location',
                toolbarCloseText: '完成',
                rotateEffect: true,
                cols: [
                    {
                        textAlign: "center",
                        values: [ '福建', '浙江']
                    }, {
                        textAlign: "center",
                        values: [ '福州', '漳州']
                    }
                ]
            })
        },
        // 出生日期选择器初始化
        initBirthdayPicker() {
            var years = [],
                months = [],
                days = []

            for(var i = parseInt(new Date().getFullYear()); i >= 1970; i--) {
                years.push(i)
            }

            for(var i = 1; i <= 12; i++) {
                if (i < 10) {
                    months.push('0' + i)
                } else {
                    months.push(i)
                }
            }

            for(var i = 1; i <= 31; i++) {
                if (i < 10) {
                    days.push('0' + i)
                } else {
                    days.push(i)
                }
            }

            this.birthdayPicker = this.$f7.picker({
                input: '#birthday',
                toolbarCloseText: '完成',
                rotateEffect: true,
                cols: [
                    {
                        textAlign: "center",
                        values: years
                    },
                    {
                        textAlign: "center",
                        values: months
                    },
                    {
                        textAlign: "center",
                        values: days
                    }
                ],
                formatValue: function(values, displayValues) {
                    return displayValues[0] + '-' + displayValues[1] + '-' + displayValues[2]
                }
            })
        },
        //  所在地选择
        openLocationPicker() {
            this.locationPicker.open()
        },

        // 出生日期选择
        openBirthdayPicker() {
            this.birthdayPicker.open()
        }
    }
};
</script>
